<template>
  <div class="crud-opts">
        <span class="crud-opts-left">
          <!--左侧插槽-->
          <slot name="left"/>
          <el-button
              v-permission="presenter.permission.create"
              class="filter-item"
              size="small"
              type="primary"
              icon="plus"
              v-if="presenter.optShow.create"
              @click="handleCreate"
          >
            添加
          </el-button>
          <el-button
              v-permission="presenter.permission.edit"
              class="filter-item"
              size="small"
              type="success"
              icon="edit"
              v-if="presenter.optShow.edit"
              :disabled="presenter.selections.length !== 1"
              @click="handleEdit(presenter.selections[0])"
          >
            修改
          </el-button>
          <el-button
              v-permission="presenter.permission.remove"
              class="filter-item"
              type="danger"
              icon="delete"
              size="small"
              v-if="presenter.optShow.remove"
              :loading="presenter.batchRemoveLoading"
              :disabled="presenter.selections.length === 0"
              @click="handleRemove(presenter.selections)"
          >
            删除
          </el-button>
          <el-button
              class="filter-item"
              size="small"
              type="warning"
              icon="download"
              v-if="presenter.optShow.download"
              :loading="presenter.downloadLoading"
              @click="handleExport"
          >导出</el-button>
          <!--右侧-->
          <slot name="right"/>
        </span>

    <el-button-group class="crud-opts-right">
      <el-button
          size="small"
          plain
          type="info"
          :icon="presenter.searchToggle ? 'arrow-up' : 'arrow-down'"
          class="filter-item"
          @click="toggleSearch()"
      />
      <el-button
          size="small"
          icon="refresh"
          class="filter-item"
          @click="presenter.fetchList()"
      />


      <el-popover
          placement="bottom-end"
          width="150"
          trigger="click"
      >
        <template v-slot:reference>
          <el-button
              size="small"
              class="filter-item"
              icon="grid"
          >
            <i
                class="fa fa-caret-down"
                aria-hidden="true"
            />
          </el-button>
        </template>

        <el-checkbox
            v-model="allColumnsSelected"
            :indeterminate="allColumnsSelectedIndeterminate"
            @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <template v-for="item in tableColumns" :key="item.property">
          <div style="clear: both"></div>
          <el-checkbox
              v-model="item.visible"
              :disabled="item.fixed !== false"
              @change="handleCheckedTableColumnsChange(item)"
          >
            {{ item.label ? item.label : '--' }}
          </el-checkbox>
        </template>
      </el-popover>
    </el-button-group>
  </div>
</template>

<script>

import {watch} from "vue";

export default {
  data() {
    return {
      tableColumns: [],
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false,
      // 忽略下次表格列变动
      ignoreNextTableColumnsChange: false,

      // 主页
      presenter: null
    }
  },
  created() {
    this.presenter = this.getPresenter()
  },
  methods: {
    getPresenter(parent = this.$parent) {
      if (parent.IS_ESJ_CRUD) {
        return parent
      } else {
        return this.getPresenter(parent.$parent)
      }
    },
    toggleSearch() {
      this.presenter.searchToggle = !this.presenter.searchToggle
      // // 重新调整表格高度 移动到了useCrud.js中去
      // const bottomOffset = this.presenter.bottomOffset
      // if (bottomOffset != false) {
      //   this.$nextTick(() => {
      //     const height = window.innerHeight - this.presenter.$refs.table.$el.getBoundingClientRect().top - bottomOffset
      //     this.presenter.$refs.table.layout.setHeight(height)
      //     this.presenter.$refs.table.doLayout()
      //   })
      // }
    },
    getTable() {
      return this.presenter.$refs.table
    },
    handleCheckAllChange(val) {
      if (val === false) {
        this.allColumnsSelected = true
        return
      }
      this.tableColumns.forEach(column => {
        if (!column.visible) {
          column.visible = true
        }
      })
      this.allColumnsSelected = val
      this.allColumnsSelectedIndeterminate = false
      this.updateColumnVisible()
    },
    handleCheckedTableColumnsChange(item) {
      let totalCount = 0
      let selectedCount = 0
      this.tableColumns.forEach(column => {
        ++totalCount
        selectedCount += column.visible ? 1 : 0
      })
      if (selectedCount === 0) {
        this.$notify.warning({
          message: '请至少选择一列！',
          duration: 2500
        })
        this.$nextTick(function () {
          item.visible = true
        })
        return
      }
      this.allColumnsSelected = selectedCount === totalCount
      this.allColumnsSelectedIndeterminate = selectedCount !== totalCount && selectedCount !== 0
      this.updateColumnVisible()
    },
    updateColumnVisible() {
      this.getTable().store.states.columns.value = this.tableColumns.filter(e => e.visible == true)
      this.getTable().$refs.tableHeaderRef.columnRows[0] = this.tableColumns.filter(e => e.visible == true)
      this.ignoreNextTableColumnsChange = true
    },

    handleCreate() {
      this.presenter.handleCreate()
    },
    handleEdit(data) {
      this.presenter.handleEdit(data)
    },
    handleRemove(data) {
      this.$confirm('确定批量删除选中数据？', '提示', {
        type: 'warning'
      })
      .then(() => { this.presenter.handleRemove(data) })
      // this.presenter.handleRemove(data)
    },
    handleExport() {
      this.presenter.handleExport()
    }

  },
  mounted() {
    watch(this.getTable().store.states.columns, (newValue, oldValue) => {
      if (oldValue.length < 1) {
        this.tableColumns = this.getTable().store.states.columns.value
        this.tableColumns.forEach(column => {
          column.visible = true
        })
      }
    })
  }
}
</script>

<style>
.crud-opts {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts .crud-opts-right {
  margin-left: auto;
}
</style>

